<template>
    <div class="app-container" style="padding: 5px;">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">客户投诉工单统计</span>
            </div>
            <div ref="chart" style="width: 100%; height: 500px;"></div>
        </el-card>

        <el-card class="box-card" style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">客户投诉工单明细</span>
            </div>
            <el-table v-loading="loading" :data="kfhfOrders" border stripe>
                <el-table-column label="日期" align="center" prop="wk_year" width="250">
                    <template slot-scope="scope">
                        <span v-if="scope.row.wk_year=='0'">Null</span>
                        <span v-if="scope.row.wk_year!='0'">{{ scope.row.wk_year }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="问题分类" align="center" prop="wtfl" width="120" />
                <el-table-column label="投诉渠道" align="center" prop="tsqd" width="120"/>
                <el-table-column label="客户姓名" align="center" prop="cus" width="120"/>
                <el-table-column label="投诉产品" align="center" prop="tscp" width="160"/>
                <el-table-column label="投诉问题" align="left" prop="tswt"/>
                <el-table-column label="处理结果" align="center" prop="cljg" width="160"/>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
        </el-card>
    </div>
</template>

<script>
import { listKhtsOrder,listKftsOrdersInfo } from "@/api/system/dashboard/shdashboard";
import * as echarts from 'echarts';
export default {
  name: "Kfhfdash",
  data() {
    return {
      loading: true,
      total: 0,
      kfhfOrders: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wtfl: null,
      },
    }
  },
  created() {
    this.getList();
  },
  mounted(){
    this.initChart();
  },
  methods: {
    getList(){
      this.loading = true;
      listKftsOrdersInfo(this.queryParams).then(response => {
        this.kfhfOrders = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    initChart(){
      listKhtsOrder().then(res =>{
        const chart = echarts.init(this.$refs.chart);
        const that = this;
        const option = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['死苗', '服务', '延期交付', '货不对版', 'NULL','总和']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.data.labels,
              axisLabel: {
                rotate: 90, // 设置 X 轴文字旋转角度
                interval: 0, // 强制显示所有标签
                fontSize: 12, // 文字大小
                color: '#333' // 文字颜色
              }
            },
            yAxis: {
                type: 'value'
            },
            // series: res.data.series
            series: res.data.series.map((s, i) => ({
              ...s,
              // 核心：未被选中的系列降低透明度
              lineStyle: { opacity: 1 },
              itemStyle: { opacity: 1 },
            }))
        };
        chart.setOption(option);
        chart.on('click', function(params) {
          if (params.componentType === 'series') {
            that.queryParams.wtfl = params.seriesName;

            const optionn = {
              title: {
                text: ''
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['死苗', '服务', '延期交付', '货不对版', 'NULL','总和']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.labels,
                axisLabel: {
                  rotate: 90, // 设置 X 轴文字旋转角度
                  interval: 0, // 强制显示所有标签
                  fontSize: 12, // 文字大小
                  color: '#333' // 文字颜色
                }
              },
              yAxis: {
                  type: 'value'
              },
              // series: res.data.series
              series: res.data.series.map((s, i) => ({
                ...s,
                // 核心：未被选中的系列降低透明度
                itemStyle: { opacity:  params.seriesIndex === -1 || params.seriesIndex === i ? 1 : 0.1 },
                lineStyle: { opacity: params.seriesIndex === -1 || params.seriesIndex === i ? 1 : 0.1 },
              }))
            };
            chart.setOption(optionn);
            that.getList();
          }
        });
        chart.getZr().on('click', function(event) {
          if (!event.target) {
            that.queryParams.wtfl = null;
            const optionn = {
              title: {
                text: ''
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['死苗', '服务', '延期交付', '货不对版', 'NULL','总和']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.labels,
                axisLabel: {
                  rotate: 90, // 设置 X 轴文字旋转角度
                  interval: 0, // 强制显示所有标签
                  fontSize: 12, // 文字大小
                  color: '#333' // 文字颜色
                }
              },
              yAxis: {
                  type: 'value'
              },
              // series: res.data.series
              series: res.data.series.map((s, i) => ({
                ...s,
                // 核心：未被选中的系列降低透明度
                lineStyle: { opacity: 1 },
                itemStyle: { opacity: 1, },
              }))
            };
            chart.setOption(optionn);
            // 重新查数据
            that.getList();
          }
        });
      })
    },
  }
};
</script>
